<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="userName" label="账号" width="120"></el-table-column>
      <el-table-column prop="gender" label="性别" width="120"></el-table-column>
      <el-table-column prop="age" label="年龄" width="300"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {mapState, mapActions, mapGetters} from 'vuex'
export default {
    data(){
        return{
            tableData:[]
        }
    },
    created(){
        this.getuserlist().then(()=>{
            console.log(this.filtUserList)
            console.log(this.userList)
            this.tableData= this.filtUserList
        })
    },
    computed:{
        ...mapState({
            userList:state=>state.userlist
        }),
        ...mapGetters(['filtUserList'])
    },
    methods:{
        ...mapActions({
            getuserlist:'GET_USERLIST'
        })
    }
}
</script>